<template>
  <el-container>
    <!-- 侧边栏 -->
    <el-aside width="210px">
      <div class="logo-container">
        <h2>音频收集系统</h2>
      </div>
      <el-menu
        router
        :default-active="activeMenu"
        text-color="var(--text-primary)"
        active-text-color="var(--primary)"
      >
        <el-menu-item index="/dashboard">
          <i class="el-icon-s-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="/users">
          <i class="el-icon-user"></i>
          <span slot="title">用户管理</span>
        </el-menu-item>
        <el-menu-item index="/sentences">
          <i class="el-icon-document"></i>
          <span slot="title">句子管理</span>
        </el-menu-item>
        <el-menu-item index="/recordings">
          <i class="el-icon-headset"></i>
          <span slot="title">音频管理</span>
        </el-menu-item>
        <el-menu-item index="/assignments">
          <i class="el-icon-s-order"></i>
          <span slot="title">句子分配</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    
    <el-container>
      <!-- 顶部导航 -->
      <el-header>
        <div class="header-container">
          <div class="left">
            <i class="el-icon-s-fold toggle-btn" @click="toggleSidebar"></i>
            <span class="header-title">{{ currentPath }}</span>
          </div>
          <div class="right">
            <el-dropdown trigger="click" @command="handleCommand">
              <span class="el-dropdown-link">
                <div class="avatar-wrapper">
                  <i class="el-icon-user-solid avatar-icon"></i>
                </div>
                <span class="username">{{ username }}</span>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      
      <!-- 主要内容区域 -->
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Layout',
  data() {
    return {
      isCollapse: false
    }
  },
  computed: {
    ...mapGetters(['user']),
    username() {
      return this.user ? this.user.username : ''
    },
    activeMenu() {
      return this.$route.path
    },
    currentPath() {
      const { meta } = this.$route
      return meta ? meta.title : ''
    }
  },
  methods: {
    toggleSidebar() {
      this.isCollapse = !this.isCollapse
    },
    handleCommand(command) {
      if (command === 'logout') {
        this.$store.dispatch('logout')
        this.$router.push('/login')
      }
    }
  }
}
</script>

<style scoped>
.logo-container {
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: var(--text-primary);
  font-size: 18px;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-card);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  background-color: var(--bg-card);
  padding: 0 20px;
}

.toggle-btn {
  font-size: 20px;
  margin-right: 15px;
  cursor: pointer;
  color: var(--text-primary);
}

.header-title {
  font-size: 16px;
  font-weight: 500;
}

.el-dropdown-link {
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
}

.avatar-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}

.avatar-icon {
  background-color: var(--primary-light);
  color: white;
  border-radius: 50%;
  padding: 8px;
  font-size: 16px;
}

.username {
  margin: 0 5px;
}

/* 移除顶部白条 */
.el-header {
  padding: 0;
  margin: 0;
  height: var(--header-height) !important;
}

.el-main {
  padding: 20px;
  margin: 0;
}

/* 确保侧边栏顶部与页面顶部对齐 */
.el-aside {
  padding-top: 0;
  margin-top: 0;
}

/* 调整用户信息区域的位置 */
.right {
  display: flex;
  align-items: center;
  height: var(--header-height);
  padding: 0 10px;
}

/* 调整下拉菜单的位置 */
.el-dropdown {
  height: 50px;
  display: flex;
  align-items: center;
  margin: 10px 0;
}
</style> 